
.index-wrapper {
    height: 100%;
    text-align: center;

    .index-content {
        padding: 1.7rem .7rem;

        .title {
            color: #3d5da8;
            font-size: .37rem;
            font-weight: 200;
        }

        .img {
            color: rgb(179,24,0);
            font-size: .27rem;
            width: 73%;
            margin: 0 auto;

            border: 1px solid #e21864;
            color: #e21864;
            padding: 1rem .3rem;
            border-radius: .07rem;
            border-top-right-radius: 170px;
        }

        .button {
            position: fixed;
            bottom: 2rem;
            left: 13%;
            width: 73%;
            height: .9rem;
            font-size: .37rem;
            border: 1px solid #8c2986;
            letter-spacing: .03rem;
            color: #8c2986;
            border-radius: .07rem;
            background: none;
        }
    }

    .mt30 {
        margin-top: .3rem;
    }

    .mt70 {
        margin-top: .7rem;
    }
}



















$bg : rgb(210,210,180);
$orange : #F8C475;
$red : #F87575;
$green : rgb(180,210,140);
$blue : #75BFF8;
$sky : lighten($blue, 10);
$yellow : #F3F875;
$purple : #D9ABFF;
$pink : #FF89B3;

@mixin animation-duration($t){
  -moz-animation-duration: $t;
  -webkit-animation-duration: $t;
  -moz-animation-duration: $t;
}
@mixin animation-delay($t){
  -moz-animation-delay: $t;
  -webkit-animation-delay: $t;
  -moz-animation-delay: $t;
}
@mixin transform($property: none) {
  transform: $property;
  -moz-transform: $property;
  -webkit-transform: $property;
  -o-transform: $property;
}

@mixin animation($name, $duration, $delay: 0s, $fill-mode: forwards){
  -moz-animation-name: $name; 
  -webkit-animation-name: $name; 
  
  -webkit-animation-fill-mode: $fill-mode;
  -moz-animation-fill-mode: $fill-mode;
  
  -webkit-animation-delay: $delay;
  -moz-animation-delay: $delay;

  -moz-animation-duration: $duration; 
  -webkit-animation-duration: $duration; 
}
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@include keyframes(grow){
  from {
    top: 15em;
  }
  to {
    top: 1em;
    opacity: 1
  }
}

@include keyframes(turn-right){
  from {
    @include transform(rotateY(-140deg));
  }
  to {
    @include transform(rotateY(0deg));
  }
}
@include keyframes(turn-left){
  from {
    @include transform(rotateY(140deg));
  }
  to {
    @include transform(rotateY(0deg));
  }
}
@mixin config($w,$top, $background, $border-color, $border-width, $leaves){
  height: $w;
  width: $w;
  opacity: 0;
  margin-top: $top;
  background-color: $background;
  border-radius: $w * 5;
  border: $border-width solid $border-color;
  box-shadow: 0 0 0 .2em darken($border-color, 4), 0 0 0 .2em lighten($background, 4) inset;
  
  span {
    top: $w + $border-width + .2em;
    left: $w / 2.3;
    
    @if $leaves == 0 {
      &:before {display: none;}
      &:after {display: none;}
    }
    @if $leaves == 1 {
      &:before {display: block;}
      &:after {display: none;}
    }
    @if $leaves == 2 {
      &:before {display: block;}
      &:after {display: block;}
    }
  }
}


.flower {

  @include animation(grow, 4s);
  top: 1em;
  position: absolute;
  z-index: 10;
  span {
    background: $green;
    width: .5em;
    z-index: 5;
    height: 50em;
    display: block;
    position: absolute;
 
    &:after {
     content: '';
      @include transform(rotateY(-140deg));
     -moz-transform-origin: left;
     -webkit-transform-origin: left; 
     width: 3em;
     height: 3em;
      display: block;
      background: darken($green, 5);
      border-radius: 2em 0em 2em 0em;
      box-shadow: 0 0 0 .2em darken($green, 8) inset;
      z-index: 0;
      top: 1em;
      left: .5em;
      position: absolute;
    }
    &:before {
     @include transform(rotateY(140deg));
     -moz-transform-origin: right;
     -webkit-transform-origin: right; 
     @include animation(turn-left, 4s, 4s);
     content: '';
     width: 3em;
     height: 3em;
      display: block;
      background: darken($green, 7);
      border-radius: 0em 2em 0em 2em;
      box-shadow: 0 0 0 .2em darken($green, 8) inset;
      z-index: 0;
      position: absolute;
      left: -3em;
      top: 5em;
      
    }

  }
}

//Configuring the flowers:
//=========================

.flower-0 {
  @include config(4em, 6em, $yellow, $orange, 3em, 1);
}
.flower-1 {
  @include config(6em, 1em, $sky, $blue, 1em, 2);
}
.flower-2 {
  @include config(3em, 0em,$orange, $red, 1.2em, 0);
}
.flower-3 {
  @include config(2em, 3em,$red, $orange, 3em, 1);
}
.flower-4 {
  @include config(3em, 0em,$blue, $sky, 1.2em, 1);
}
.flower-5 {
  @include config(4em, 2em,$purple, $pink, .7em, 2);
}
.flower-6 {
  @include config(5em, 7em,$red, $orange, 1.2em, 2);
}
@for $i from 0 through 6 {
    .flower-#{$i} {
      @include animation-delay(.3s * $i);
      left: 1em + (10em * $i);
    span:before {
     @include animation(turn-right, 3s, .3s * $i);
    }
    span:after {
     @include animation(turn-left, 2s, .4s * $i);
    }
  }
}